<template>
  <ShowCard class="w-full">
    <template #title>
      <div class="text-xl my-4 ">
        <p class="font-mono">单曲推荐</p>
      </div>
    </template>

    <template #subtitle>
      <div>
        <div class=" bg-gray-200 text-sm w-20 h-8 leading-8 rounded-xl">
          <button @click="toHome" class="ml-3">显示全部</button>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full flex flex-wrap rounded-lg" style="background-color: var(--showbox);">
        <div v-for="item, index in MusicBox.List" class="w-1/3 " :key="index">
          <HomeMusicCard :cover="item.cover" :title="item.name" :artist="item.singer" :time="item.time" :_id="item._id"
            :index="index" class="p-2 pb-0" @dblclick="router.push(`/musicDetail/${item._id}`)" />
        </div>
      </div>
    </template>
  </ShowCard>
</template>
<script setup lang="ts">
interface MusicType {
  _id: string;// 歌曲标识
  name: string;// 歌曲名称
  singer: {
    id: number;
    name: string;
  }[];// 演唱者
  lyricsId: string;//歌词唯一标识
  album: object;//所属专辑唯一标识
  cover: string;//封面
  link: string;//播放地址
  time: string,//时长
};
const router = useRouter()
const MusicBox = defineProps<{ List: MusicType[] }>()


const toHome = function () {
  router.push('./music')
};

</script>
<style lang="less" scoped></style>
